<!-- 
  @name: 现金券详情
  @date: 2020.1.13
 -->
<template>
	<view class="content">
		<!-- 券信息 -->
		<view class="card" :style="{opacity: isUsed ? '0.6' : '1'}">
			<view class="left">
				<text class="icon">￥</text>
				<text class="text">{{info.cashMoney}}</text>
			</view>
			<view class="right">
				<view class="note">{{info.cashName}}</view>
				<view class="point">
					<text class="p1">{{info.integraAmount}}</text>
					<text class="p2">分</text>
				</view>
			</view>
		</view>
		
		<view class="separate_line"></view>
		
		<!-- 已使用的门店 -->
		<view class="canable" v-show="isUsed">
			<image class="img" :src="info.storeLogo"></image>
			<text class="text">{{info.storeName}}</text>
			<text>已使用</text>
		</view>
		
		<!-- 二维码 -->
		<view class="erweima" :class="isUsed ? 'b1' : 'b2'">
			<text class="num">券号：{{info.couponCode}}</text>
			<image
				class="img"
				:style="{opacity: isUsed ? '0.3' : '1'}"
				src="http://img.etubang.com/group1/M00/00/40/rBCky14b5NeAHpVAAAAa2nUS5xg262.jpg"></image>
			<text class="tip">请向门店出示二维码或券号</text>
			<view class="img-2" v-if="isUsed"></view>
		</view>
		
		<!-- 使用方法 -->
		<view class="notice">
			<view class="tip">
				<text class="dian"></text>
				<text class="t1">使用方法</text>
				<text class="dian"></text>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">现金券兑换成功后，可在我的页面 “现金券” 中查看使用。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">下载“
					<text class="str">途帮养车APP</text>
					”，查找相应服务门店。
				</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">按所兑换现金券指定可使用项目，向门店进行即时或预约服务。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">向门店出示现金券的券号或二维码，进行核销使用。</view>
			</view>
		</view>
		
		<!-- 现金券规则 -->
		<view class="notice p1">
			<view class="tip">
				<text class="dian"></text>
				<text class="t1">现金券规则</text>
				<text class="dian"></text>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">现金券只可用于抵扣相应服务费用，不找零，不可提现。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">当现金券面额大于服务费用时，本券不找零。</view>
			</view>
			<view class="msg">
				<text class="dian"></text>
				<view class="text">当现金券面额小于服务费用时，需补付差额。</view>
			</view>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="getInfo"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cashCouponId: 0,  //现金券id
				isUsed: false,  //是否被使用过
				info: {},  //现金券详情
			}
		},
		onLoad(e) {
			this.cashCouponId = e.cashCouponId;
			this.isUsed = e.couponStatus == 1 ? true : false;
			this.getInfo();
		},
		methods: {
			//获取券信息
			getInfo() {
				this.$http({
					url: this.$api.couponUrl + 'getcashcoupondetail',
					data: {
						cashCouponId: this.cashCouponId
					}
				}).then(res => {
					this.info = res;
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 券信息 */
	.card {
		display: flex;
		flex-direction: row;
		width: 704rpx;
		height: 215rpx;
		margin: 0 23rpx;
		margin-top: 5rpx;
		padding: 10rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky14b1sSAM3gmAAAoGGO0hf4431.png');
		.left {
			width: 190rpx;
			text-align: center;
			color: $color-white;
			padding-top: 60rpx;
			.icon {
				font-size: 40rpx;
			}
			.text {
				margin-left: 6rpx;
				font-size: 68rpx;
				font-family: $font-family-num;
			}
		}
		.right {
			flex: 1;
			padding: 0 30rpx;
			.note {
				margin-top: 30rpx;
				font-size: 30rpx;
			}
			.point {
				flex: 1;
				margin-top: 25rpx;
				color: $color-primary;
				.p1 {
					font-size: 50rpx;
				}
				.p2 {
					margin-left: 8rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	
	/* 查看可用门店 */
	.canable {
		width: 690rpx;
		height: 110rpx;
		margin: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx dashed $color-nomore;
		.img {
			width: 58rpx;
			height: 58rpx;
			margin-right: 42rpx;
			border-radius: $border-radius-circle;
		}
		.text {
			flex: 1;
		}
		.icon {
			width: 16rpx;
			height: 26rpx;
		}
	}
	
	/* 二维码 */
	.erweima.b1 {
		border-bottom: 2rpx dashed $color-nomore;
	}
	.erweima.b2 {
		border-bottom: 2rpx dashed $color-text;
	}
	.erweima {
		width: 690rpx;
		margin: 0 30rpx;
		padding: 60rpx 0;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		position: relative;
		.num {
			font-size: 30rpx;
		}
		.img {
			width: 333rpx;
			height: 323rpx;
			margin-top: 40rpx;
		}
		.tip {
			margin-top: 40rpx;
			color: $color-grey;
		}
		.img-2 {
			position: absolute;
			top: 84rpx;
			right: 138rpx;
			width: 139rpx;
			height: 139rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15XmVGAAPYOAABUwjGFc7o120.png');
		}
	}
	
	/* 兑换说明 */
	.notice.p1 {
		padding-bottom: 60rpx;
	}
	.notice {
		width: 750rpx;
		padding: 60rpx;
		padding-bottom: 0;
		background-color: $color-white;
		.dian {
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			background-color: $color-grey;
			border-radius: $border-radius-circle;
		}
		.tip {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.t1 {
				margin: 0 20rpx;
				font-size: 30rpx;
			}
		}
		.msg {
			width: 100%;
			margin-top: 36rpx;
			display: flex;
			flex-direction: row;
			.dian {
				margin-top: 6rpx;
			}
			.text {
				flex: 1;
				line-height: 50rpx;
				margin-top: -15rpx;
				margin-left: 23rpx;
				color: $color-grey-dark;
				font-size: 24rpx;
				.str {
					color: $color-text-primary;
				}
			}
		}
	}
</style>
